<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表板</h1>
      <p>欢迎回来，{{ userStore.displayName }}！</p>
    </div>
    
    <div class="dashboard-content">
      <!-- 统计卡片 -->
      <div class="stats-grid">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#409eff">
                <OfficeBuilding />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.clubCount }}</div>
              <div class="stat-label">我的社团</div>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#67c23a">
                <Calendar />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.activityCount }}</div>
              <div class="stat-label">参与活动</div>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#e6a23c">
                <Document />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.applicationCount }}</div>
              <div class="stat-label">我的申请</div>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#f56c6c">
                <Bell />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.notificationCount }}</div>
              <div class="stat-label">未读通知</div>
            </div>
          </div>
        </el-card>
      </div>
      
      <!-- 快捷操作 -->
      <div class="quick-actions">
        <h3>快捷操作</h3>
        <div class="action-grid">
          <el-button
            v-for="action in quickActions"
            :key="action.name"
            :icon="action.icon"
            size="large"
            @click="handleAction(action.path)"
            class="action-button"
          >
            {{ action.name }}
          </el-button>
        </div>
      </div>
      
      <!-- 最近活动 -->
      <div class="recent-activities">
        <h3>最近活动</h3>
        <el-card>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
            >
              <el-card>
                <h4>{{ activity.title }}</h4>
                <p>{{ activity.description }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { OfficeBuilding, Calendar, Document, Bell } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    OfficeBuilding,
    Calendar,
    Document,
    Bell
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    
    const stats = ref({
      clubCount: 3,
      activityCount: 12,
      applicationCount: 2,
      notificationCount: 5
    })
    
    const quickActions = ref([
      { name: '浏览社团', icon: 'OfficeBuilding', path: '/discovery/club-square' },
      { name: '查看活动', icon: 'Calendar', path: '/discovery/activity-center' },
      { name: '我的社团', icon: 'Briefcase', path: '/my-workbench/my-clubs' },
      { name: '我的申请', icon: 'Document', path: '/my-workbench/my-applications' }
    ])
    
    const recentActivities = ref([
      {
        id: 1,
        title: '加入摄影社团',
        description: '您的申请已通过审核，欢迎加入摄影社团！',
        time: '2024-01-15 14:30',
        type: 'success'
      },
      {
        id: 2,
        title: '参加篮球比赛',
        description: '明天下午2点在体育馆举行篮球比赛，请准时参加。',
        time: '2024-01-14 16:20',
        type: 'primary'
      },
      {
        id: 3,
        title: '系统维护通知',
        description: '系统将于今晚22:00-24:00进行维护升级。',
        time: '2024-01-13 10:00',
        type: 'warning'
      }
    ])
    
    const handleAction = (path) => {
      router.push(path)
    }
    
    onMounted(() => {
      // 根据用户角色调整快捷操作
      if (userStore.isAdmin) {
        quickActions.value.push(
          { name: '社团管理', icon: 'Setting', path: '/club-management/profile' }
        )
      }
      if (userStore.isSuperAdmin) {
        quickActions.value.push(
          { name: '平台管理', icon: 'Tools', path: '/platform-management/user-management' }
        )
      }
    })
    
    return {
      userStore,
      stats,
      quickActions,
      recentActivities,
      handleAction
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .dashboard-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .dashboard-content {
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 32px;

      .stat-card {
        .stat-content {
          display: flex;
          align-items: center;
          padding: 8px 0;

          .stat-icon {
            margin-right: 16px;
          }

          .stat-info {
            .stat-value {
              font-size: 32px;
              font-weight: 600;
              color: #303133;
              line-height: 1;
              margin-bottom: 4px;
            }

            .stat-label {
              font-size: 14px;
              color: #909399;
            }
          }
        }
      }
    }

    .quick-actions {
      margin-bottom: 32px;

      h3 {
        margin: 0 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .action-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;

        .action-button {
          height: 60px;
          font-size: 16px;
        }
      }
    }

    .recent-activities {
      h3 {
        margin: 0 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
}
</style>
